<template>
  <form class="book-room-wrap" @submit="formSubmit">
    <uni-list>
      <uni-list-item title="姓名">
        <template v-slot:footer>
          <input name="userName" class="right-input" placeholder="请输入姓名"/>
        </template>
      </uni-list-item>
      <uni-list-item title="联系方式">
        <template v-slot:footer>
          <input name="userPhone" type="number" class="right-input" placeholder="请输入联系方式"/>
        </template>
      </uni-list-item>
      <uni-list-item title="预约日期">
        <template v-slot:footer>
          <uni-datetime-picker
              :iconFlg="false"
              type="datetime"
              :start="startDate"
              :end="endDate"
              v-model="formData.subscribeTime"
              placeholder="请选择预约日期" styles="font-size:32rpx;text-align: right;"
              :border="false"
              :hide-second="true"
              :disabled-date="bookDisabledDate"
          />
        </template>
      </uni-list-item>
    </uni-list>
    <view class="room-btn">
      <button class="btn" form-type="submit">提交审核</button>
    </view>
  </form>
</template>
<script setup>
import {reactive, ref, provide, computed} from "vue"
import {onLoad} from "@dcloudio/uni-app";
import {addSubscribeInfo} from "@/package_kuafu_apartment/pages/api/house-details"
import UniDatetimePicker
  from "@/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue";
import UniListItem from "@/uni_modules/uni-list/components/uni-list-item/uni-list-item.vue";
import UniList from "@/uni_modules/uni-list/components/uni-list/uni-list.vue";
import {getDisabledTimesApi, getHolidaysDateApi} from "@/package_kuafu_apartment/pages/api/public";
const startDate = new Date()
const endDate = computed(() => {
  return `${new Date().getFullYear()}-12-31`
})
const formData = reactive({
  userName: '',
  userPhone: "",
  subscribeTime: "",
  houseId: ''
})
const bookDisabledDate = ref([])
const getHolidaysDate = async () => {
  const curYear = new Date().getFullYear();
  const { code, data } = await getHolidaysDateApi(curYear);
  if (code === 200) {
    const holidays = data.filter(({ isWork }) => isWork === '0').map(({ date }) => date);
    const weekendsNeedWorkDates = data.filter(({ isWork }) => isWork === '1').map(({ date }) => date);
    // 获取周末日期并移除需工作的日期
    const filteredWeekends = getWeekendDates(curYear).filter(weekendDate =>
        !weekendsNeedWorkDates.includes(weekendDate)
    );
    // 合并假日和筛选后的周末日期
    bookDisabledDate.value = [...holidays, ...filteredWeekends];
  }
}

const getWeekendDates = year => {
  const weekendDates = [];
  const startDate = new Date(year, 0, 1);
  const endDate = new Date(year, 11, 31);
  for (let date = startDate; date <= endDate; date.setDate(date.getDate() + 1)) {
    if (date.getDay() === 0 || date.getDay() === 6) {
      const formattedDate = `${date.getFullYear()}-${('0' + (date.getMonth()+1)).slice(-2)}-${('0' + date.getDate()).slice(-2)}`;
      weekendDates.push(formattedDate);
    }
  }
  return weekendDates;
}
const disabledTimes = ref([])
provide('disabledTimes', disabledTimes)
const getDisabledTimes = async () => {
  const res = await getDisabledTimesApi()
  const { code, data } = res
  if (code === 200) {
    disabledTimes.value = [...data]
  }
}
provide('isWorkTime', true)
onLoad((option) => {
  getHolidaysDate()
  getDisabledTimes()
  if (option) {
    formData.houseId = option.smallId
  }
})
function formSubmit(e) {
  formData.userName = e.detail.value.userName
  formData.userPhone = e.detail.value.userPhone
  formData.subscribeTime = formData.subscribeTime + ':00'
  console.log('form发生了submit事件，携带数据为：', formData)
  addSubscribeInfo(formData).then(res => {
    uni.showModal({
      title: '提示',
      showCancel: false,
      content: res.msg,
      success: function (res) {
        if (res.confirm) {
          uni.navigateBack();
        }
      }
    });
  })
}
</script>
<style lang="less" scoped>
.book-room-wrap {
  margin-bottom: 40rpx;

  .book-room-line {
    border-bottom: 1px solid #F4F5FA;
  }

  .right-input {
    text-align: right;
    font-size: 30rpx;
  }
}
</style>
